<template>
  <div class="subject-list">
    <el-card class="topBar">
      <el-form ref="form" :inline="true" :model="form">
        <el-form-item label="学科编号">
          <el-input v-model.trim="form.rid" />
        </el-form-item>
        <el-form-item label="学科名称">
          <el-input v-model.trim="form.name" />
        </el-form-item>
        <el-form-item label="创建者">
          <el-input v-model.trim="form.username" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="禁用" value="0" />
            <el-option label="启用" value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="down">
        <div class="left">
          <el-button type="primary" @click="searchEvent">搜索</el-button>
          <el-button type="danger" @click="clearEvent">清除</el-button>
          <el-button type="primary" @click="addEvent">+ 新增学科</el-button>
          <el-button v-print="{id:'user',popTitle:'学科列表信息'}" type="primary" class="el-icon-printer">打印</el-button>
          <el-button type="primary" class="el-icon-upload" @click="$router.push('/subjectlist/import')">excel导入</el-button>
          <el-button
            type="success"
            class="el-icon-document"
            @click="exportEvent"
          >Excel导出</el-button>
        </div>
      </div>
    </el-card>
    <div id="user">
      <el-card class="top">
        <el-table :data="list">
          <el-table-column label="序号">
            <template #default="{ $index }">
              <!-- table序号真实化 -->
              <!-- 真实序号=(页码-1)*页容量+下标+1 -->
              {{ (page.page - 1) * page.limit + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="rid" label="学科编号" />
          <el-table-column prop="name" label="学科名称" />
          <el-table-column prop="short_name" label="学科简称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column
            prop="create_time"
            label="创建日期"
            :formatter="changeTime"
          />
          <el-table-column prop="status" label="状态" :formatter="changeStatus">
            <template #default="{row}">
              <div :style="{color:row.status === 0 ? 'red' : ''}">
                {{ row.status===0 ? '禁用' : '启用' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column #default="{ row }" label="操作" width="260px">
            <el-button
              size="small"
              type="success"
              @click="editEvent(row)"
            >编辑</el-button>
            <el-button size="small" type="info" @click="disableEvent(row.id)">
              {{ row.status === 0 ? '启用' : '禁用' }}</el-button>
            <el-button
              size="small"
              type="danger"
              @click="delEvent(row.id)"
            >删除</el-button>
          </el-table-column>
        </el-table>
        <div class="block" style="text-align: center">
          <el-pagination
            background
            :current-page.sync="page.page"
            :page-sizes="[1, 2, 5, 10, 100, 200, 300, 400]"
            :page-size.sync="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="getData"
          />
        </div>
      </el-card>
      <!-- 新增弹框 -->
      <Add ref="add" v-model="show" :init-list="initList" @getData="getData" />
      <!-- excel导入组件 -->
    </div>
  </div></template>

<script>
import Add from './components/add.vue'
import { subject, subjectRemove, subjectStatus } from '@/api/subject'
import jsCookie from 'js-cookie'
import dayjs from 'dayjs'
import { export_json_to_excel } from '@/vendor/Export2Excel'
export default {
  components: {
    Add
  },

  data() {
    return {
      searchList: [],
      initList: [],
      show: false,
      list: [],
      form: {
        rid: '', //	否	string	学科编号
        name: '', //	否	string	学科名称
        username: '', //	否	string	创建者用户名
        status: '' // s
      },
      page: {
        page: 1,
        limit: +jsCookie.get('size') || 10
      },
      total: 100
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 查
    async getData() {
      const res = await subject({ ...this.form, ...this.page })
      this.list = res.data.items
      this.initList = res.data.items
      this.total = res.data.pagination.total
      // console.log('传入子组件数据', this.initList)
      console.log('学科列表', res)
    },
    // 新增事件
    addEvent() {
      this.show = true
      this.$refs.add.type = 'add'
    },
    // 编辑事件
    editEvent(row) {
      this.show = true
      this.$refs.add.type = 'edit'
      // console.log('row', row)
      // 数据回显
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 页码发生改变
    sizeChange() {
      console.log(1)
      this.getData()
      jsCookie.set('size', this.page.limit)
    },
    // 删除事件
    async delEvent(id) {
      await this.$confirm('确认要删除该学科吗', '温馨提示')
      const res = await subjectRemove({ id: id })
      console.log('删除', res)
      if (this.page.page > 1 && this.list.length === 1) {
        this.page.page--
      }
      this.$message.success('删除学科成功')
      this.getData()
    },
    // 禁用按钮
    async disableEvent(id) {
      // console.log('row', row)
      await subjectStatus({ id })
      this.getData()
      // console.log('禁用状态', res)
    },
    // 状态转换
    changeStatus(row, column, cellValue, index) {
      // console.log('cellValue', cellValue)
      return row.status === 1 ? '启用' : '禁用'
    },
    // 时间转换
    changeTime(row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD')
    },
    // 搜索按钮
    async searchEvent() {
      const res = await subject(this.form)
      console.log('搜索', res)
      this.searchList = res.data.items
      console.log('searchList', this.searchList)
      if (this.searchList.length === 0) {
        this.$message.error('学科不存在')
      } else {
        this.$message.success('搜索学科成功')
        this.getData()
      }
    },
    // 清除按钮
    clearEvent() {
      this.form = {
        rid: '', //	否	string	学科编号
        name: '', //	否	string	学科名称
        username: '', //	否	string	创建者用户名
        status: ''
      }
    },
    // 导出
    async exportEvent() {
      const res = await subject({
        page: 1,
        limit: 9999
      })
      console.log('学科', res)
      const newData = res.data.items.map(item => {
        return [
          item.rid,
          item.name,
          item.short_name,
          item.username,
          item.create_time

        ]
      })
      export_json_to_excel({
        header: ['学科编号', '学科名称', '学科简称', '创建者', '创建日期'],

        data: newData,
        filename: '学科列表'
      })
      this.$message.success('导出列表成功')
    }

  }
}
</script>
<style lang="scss" scoped>
.subject-list {
  .topBar {
    margin-bottom: 10px;
    .down {
      display: flex;
    }
  }
  .block {
    margin-top: 20px;
  }
}
</style>
